<template>
    <div>
        <!-- {{ $route.query }},{{ $route.query.name }} -->
        <table width="100%" height="300px" align="center">
            <tr align="center">
                <td rowspan="3" style="width: 25%;">
                    <el-image style="width: 150px;height: 200px;" :src="$route.query.cover" fit="fill"
                        :preview-src-list="srcList">
                    </el-image>
                    <div>总评分：{{ totalScore }}分</div>
                </td>
                <td style="width: 40%;height: 50px;">
                    <el-link :href="`https://www.bilibili.com/video/${fanju.designation}`" target="_blank">
                        <font size="30px">{{ fanju.name }}</font>
                    </el-link>
                </td>
                <td>
                    {{ fanju.labels }}
                </td>
            </tr>
            <tr align="center">
                <td style="height: 20px;">{{ fanju.pubTime }}年开播</td>
                <td>{{ fanju.episodes }}话</td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <textarea readonly style="border: 0px;width: 1200px;height: 200px;background: transparent;">
                    简介:{{ fanju.info }}
                    </textarea>
                </td>
            </tr>
        </table>
        <div class="block" align="center">
            <span class="demonstration">我的评分</span>
            <el-rate v-model="myScore" :colors="colors" show-score @change="changeScore">
            </el-rate>
        </div>

    </div>
</template>
<script>
import { getScore,userMarking } from '../../api/users'
export default ({
    name: 'FanjuItem',
    data() {
        return {
            fanju: {},
            srcList: [],
            myScore: 10,
            totalScore: 50,
            colors: ['#99A9BF', '#F7BA2A', '#FF9900']
        }
    },
    mounted() {
        this.fanju = this.$route.query
        console.log(this.fanju.cover);
        this.srcList.push(this.$route.query.cover)
        this.totalScore = this.fanju.like
        //初始化，拉取分数
        this.loadScore()
    },
    methods: {
        //修改评分，打分
        changeScore() {
            this.$confirm('是否确认打分?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //ajax请求
                userMarking({'fanjuId':this.fanju.id,'score':this.myScore,"like":this.totalScore}).then(res => {
                    if (res.data.code === 0) {
                        this.$message({
                            type: 'error',
                            message: res.data.msg
                        })
                        return
                    }
                    //打分完成后重新拉去分数
                    this.loadScore()
                    this.$message({
                        type: 'success',
                        message: res.data.msg
                    })
                }).catch(error => {
                    this.$message({
                        type: 'error',
                        message: '请求接口出错'
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消打分'
                });
                this.myScore=0
            });
        },
        //拉取用户评分和该番剧总分
        loadScore() {
            console.log("loadScore")
            getScore(this.fanju.id).then(res => {
                if (res.data.code === 0) {
                    this.$message({
                        type: 'error',
                        message: res.data.msg
                    })
                    return
                }
                //
                this.totalScore = res.data.data.like
                this.myScore = res.data.data.score

            }).catch(error => {
                this.$message({
                    type: 'error',
                    message: '请求接口出错'
                })
            })
        }
    }
})
</script>
<style lang="less" scoped></style>